Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
If playback doesn't begin shortly, try restarting your device.
My name is Antonio and I am a software engineer with over 7 years of experience. I have always been fascinated by the world of programming, and I consider myself lucky to have found a career that aligns with my passions.
Throughout my career, I have had the opportunity to work with a variety of programming languages and technologies, which has allowed me to grow and develop as a programmer. While I have gained a considerable amount of knowledge and experience, I am always eager to continue learning and improving.
I created "Code With Antonio" with the intention of sharing my love for programming and helping others to learn and grow in the field. My hope is that my tutorials and insights will be useful to others and that I can contribute to the programming community in a positive way.
Thank you for considering my channel, and I hope that you find value in the content that I provide.
317,951 views • Jul 19, 2023 • Learn Next & React and get Hired!
Show less
Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord
Github & Live Website: https://www.codewithantonio.com/proje...
Clerk Authentication: https://bit.ly/3pNzsYX
In this video, we dive deep into crafting a state-of-the-art AI SaaS Platform with five AI tools. Powered by the Next.js 13 App Router, our platform will not only be efficient but also user-centric.
The Next.js 13 App Router is a groundbreaking addition to the Next.js framework, enabling developers to design intricate client-side routing effortlessly. Leveraging this powerful tool, we'll integrate a seamless Stripe subscription system, ensuring a smooth billing process for your users.
Beyond the core functionalities, we'll embark on an instructive journey of building our SaaS application using a rich palette of web development technologies like React, Tailwind, Prisma, MySQL, Clerk, and more. Each step is elucidated in detail, ensuring a comprehensive learning experience.
Whether you're just stepping into the world of development or have years of experience under your belt, this video is tailored to impart knowledge valuable for all. Ready to master the art of building a 5-tool AI SaaS platform? Grab your coding gear, perhaps a cup of coffee, and let's pioneer the AI-driven web landscape of 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
05:40 Environment Setup
16:32 Folder Setup
25:41 Clerk Authentication
40:01 Sidebar
01:06:29 Dashboard
01:20:08 Conversation AI UI
01:42:10 Conversation AI API (Open AI)
02:08:44 Code Generation AI (Open AI)
02:19:38 Image Generation AI (Open AI)
02:43:03 Music Generation AI (Replicate AI)
02:56:03 Video Generation AI (Replicate AI)
03:03:45 API Limit
03:23:46 API Limit UI Counter
03:40:05 Pro Modal UI
04:04:47 Stripe Integration
04:59:42 Error Handling & Customer Support (Crisp)
05:08:35 Landing Page
05:24:35 Deployment & Wrap Up
Want to get mentored by me? Apply at https://www.codewithantonio.com/mentorshipHello everyone, thank you for choosing this video. In this tutorial you will learn how to build your own SaaS AI Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter!
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use: const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages});
return NextResponse.json(response.choices[0].message);
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! You deserve this recognition for your amazing work as a developer and youtuber.I'm a huge fan of yours and I always watch your videos with great interest and admiration.
This AI SaaS video is awesome! I was very excited about the content and the tips you shared.You are an inspiration to me and many other developers.
Thank you so much for everything you have done for the community.
I wish you much success in your journey and I hope to see more of your videos soon.Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS.Keep up the good work.
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out. It took me 5-6 days to complete the project.
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of YouTube windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
wow just wow. i appreciate this detailed and step by step tutorial alot. this is one of the first youtube tutorial which i could follow from start to finish. i reckon this took alot of work so i just wanted to thank you so much. you are doing god's work. i had to figure out the gpt-4 version on my own since the update but this was actually quiet fun. you are genuinely the best at explaining, going through it step by step so it's organized and clear. cheers!
Wow!! This is incredible! Thought JS Mastery was the only beast on YouTube, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
In future I hope you will give us more projects like thatYour all projects are unique and we hope that you will gift us more projects that will help our future journey ️️️Thank you sir
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it.I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the <Button> node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid.Turns out that when you use the Sheet component and then wrap like this: <SheetTrigger> <Button …props><Menu></Button ></SheetTrigger>It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone! Thanks again Antonio!!Lew Savage
At 3:56:30, if you are getting this error:- Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.Then make sure you have initialized the proModal in the first line of the function as Antonio has done. This is required because we need to initialize the hooks at the top of the function before any JSX return statements.
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free !it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
OMG, I love you Antonio️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on YouTube. You deserve 100 million subscribers and much more.Thanks for making these video's. I'm looking forward to more from you.️️️️️️
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
This is absolutely amazing. (Good quality 5 nights spent). I've an amazing new idea that is in high demand.As NextJs is very good with fontend, I would love to see a tutorial where you create a whitelabel ai-saas web application with dns management (whatever that is) for client whitelabel purchases. Also include a 3D Secure Stripe payment plan for Europeans with multiple subscription options. A python api ml model integration will be a plus.You won't believe how many people are looking for any single tutorial on one of these but there is none. Thank you for so much for this.
This is absolutely amazing Antonio! I must say, the only thing missing from a startup perspective is to integrate google analytics. This would then be the ultimate starter kit. Will you make a video on that as well?
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio!
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers!
Do not hesitate to use it in your future projects.
Thank you for your amazing videos
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel.And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
Thank you so much for these tutorials. I only got up to 1:30 so far, but I really enjoy these tutorials that are not just "Hello world". On the AI-topic: the most shocking part for me is how much of the tutorial github copilot is able to autocomplete. Some of it was non-working trash, but it made a different, but really nice looking dashboard for me when i just wrote tools.map(. I begin to think we are all going to be unemployed within the next five - ten years.
This is incredible! thank you for the in-depth tutorial. Do you think it's possible to simply deploy all of this on a different deployment platform like AWS or GCP instead of Vercel? Vercel's cost don't scale very nicely!
Awesome video! Thanks so much. I do have a question for you. I'd like to implement a history so each user can browse their past prompts and responses. I figure it wasn't included due to the different type of storage requirements. How would you, personally, go about implementing such a feature?
Amazing Sir Antonio, Thanks for this.What are you thinking about for the next project? Can I make a suggestion? It could create a DMS (Document management system), with storage in AWS S3 bucket, with workflow documents, annotations, document check-in/out version control (document), audit trails, security access control, it is a wonderful system for anyone who have a business where you share sensitive documents with your own users
Thanks for this great video, i just have a request, it will be great if you use cicd tools such git or docker on your development process, i would love to learn this part too with you
First of all, outstanding project, learned some cool things! I''ll organize my project like this from now on. Two tips: - To import stuff automatically you can press control+space;- Use prettier on save :PDid anyone else had problems with importing lucide icons?
What an amazing video, learned so much about nextjs 13 and ai models. Thanks Antonio!!I have a question are you aware of a model that enhances the speech (removes background nose etc) from an audio file similar to adobe podcast? I looked everywhere but couldn't find any :(
I love your videos, Could you make an application with a separate backend from the next 13 app and have role management within the application and language change? thank you so much!!!
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023
Code With Antonio
Code With Antonio
11KLikes
Jul 192023
Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord
Github & Live Website: https://www.codewithantonio.com/proje...
Clerk Authentication: https://bit.ly/3pNzsYX
In this video, we dive deep into crafting a state-of-the-art AI SaaS Platform with five AI tools. Powered by the Next.js 13 App Router, our platform will not only be efficient but also user-centric.
The Next.js 13 App Router is a groundbreaking addition to the Next.js framework, enabling developers to design intricate client-side routing effortlessly. Leveraging this powerful tool, we'll integrate a seamless Stripe subscription system, ensuring a smooth billing process for your users.
Beyond the core functionalities, we'll embark on an instructive journey of building our SaaS application using a rich palette of web development technologies like React, Tailwind, Prisma, MySQL, Clerk, and more. Each step is elucidated in detail, ensuring a comprehensive learning experience.
Whether you're just stepping into the world of development or have years of experience under your belt, this video is tailored to impart knowledge valuable for all. Ready to master the art of building a 5-tool AI SaaS platform? Grab your coding gear, perhaps a cup of coffee, and let's pioneer the AI-driven web landscape of 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
05:40 Environment Setup
16:32 Folder Setup
25:41 Clerk Authentication
40:01 Sidebar
01:06:29 Dashboard
01:20:08 Conversation AI UI
01:42:10 Conversation AI API (Open AI)
02:08:44 Code Generation AI (Open AI)
02:19:38 Image Generation AI (Open AI)
02:43:03 Music Generation AI (Replicate AI)
02:56:03 Video Generation AI (Replicate AI)
03:03:45 API Limit
03:23:46 API Limit UI Counter
03:40:05 Pro Modal UI
04:04:47 Stripe Integration
04:59:42 Error Handling & Customer Support (Crisp)
05:08:35 Landing Page
05:24:35 Deployment & Wrap Up